<template>
	<view class="group-set">
		<view class="all-student">
			<view class="students" :style="{height: show_all?'auto':'184rpx'}">
				<view v-for="(stu, index) in student_list" :key="index" class="images">
					<image class="img" @click="utils.userDetails(stu.accountId, stu.userType)" :src="utils.headImage(stu)" mode="aspectFill"></image>
					<text>{{stu.name || stu.wxNickname}}</text>
				</view>
				<view class="addStu" @click="addMembers()">
					<text>+</text>
				</view>
			</view>
			<view class="see-more" @click="allMembers('see')">查看{{allMembersNum}}名群成员<uni-icons color="#aaaaaa" type="right" size="24rpx" /></view>
		</view>
		<view class="flex gs-item" @click="editName()">
			<text>群聊名称</text>
			<view class="">
				{{chatGroupInfo.name}}
				<uni-icons size="24rpx" color="#aaaaaa" type="right"></uni-icons>
			</view>
		</view>
		<view class="flex gs-item" @click="seeNotice()">
			<text>群公告</text>
			<view class="">
				<uni-icons size="24rpx" color="#aaaaaa" type="right"></uni-icons> 
			</view>
		</view>
		<view class="notice-cont" v-html="chatGroupInfo.notice">
		</view>
		<view class="flex gs-item" @click="groupMana()" v-if="identityInfo.level!=1">
			<text>群管理</text>
			<view class="">
				<uni-icons size="24rpx" color="#999" type="right"></uni-icons> 
			</view>
		</view>
		<view class="flex gs-item" @click="findRecord()">
			<text>查找聊天内容</text>
			<view class="">
				<uni-icons size="24rpx" color="#999" type="right"></uni-icons> 
			</view>
		</view>
		<!-- <view class="flex gs-item">
			<text>消息免打扰</text>
			<view class="">
				<switch color="#169BD5" :checked="identityInfo.disturb==2?true:false" style="transform:scale(0.6)" @change="messageFree" />
			</view>
		</view> -->
		<view class="delete-his" @click="deleteHis()">清空聊天记录</view>
	</view>
</template>
<script>
export default {
    data() {
        return {
			show_all: false,
            student_list: [],
			allMembersNum: 0,
            exampleInfo: {},
			is_administrator: 1,
			chatGroupInfo: {},
			identityInfo: {} // level 0 是群主  1 普通成员  2 管理员
        }   
    },
    onLoad(options){
        this.exampleInfo = options;
        this.getFindStus()
    },
	onShow(){
		if(this.chatGroupInfo.id){
			this.getFindStus()
		}
		 
	},
    methods: {
		getFindStus(){
			this.api.get('chatGroupManage/findMembersByGroupId', {
				groupId: this.exampleInfo.id
			}).then(res=>{
				if(res.data.state!='ok') return;
				this.chatGroupInfo = res.data.chatGroup || {};
				let list = res.data.members || [];
				this.allMembersNum = list.length;
				this.student_list = list.splice(0, 9);
				if(this.student_list.length<=12){
					this.show_all = true;
				}
			})
			this.api.get('chatGroupManage/getGroupUserIdentity', {
				chatGroupId: this.exampleInfo.id
			}).then(res=>{
				if(res.data.state != 'ok') return;
				this.identityInfo.level = res.data.level;
			})
		},
		allMembers(type){
			uni.navigateTo({
				url: `/pages/group/all-members?id=${this.exampleInfo.id}&type=${(type||'')}&level=${this.identityInfo.level}`
			})
		},
		seeNotice(){
			uni.navigateTo({
				url: '/pages/group/edit-notice?level='+this.identityInfo.level+'&id='+this.exampleInfo.id
			})
			
		},
		editName(){
			if(this.identityInfo.level==1){
				
				this.utils.showToast('不可修改群名称');
				return
			}
			uni.navigateTo({
				url: '/pages/group/edit-name?id=' + this.exampleInfo.id+'&name='+this.chatGroupInfo.name
			})
		},
		groupMana(){
			uni.navigateTo({
				url: '/pages/group/management?id=' + this.exampleInfo.id+'&checked='+(this.chatGroupInfo.isEstoppel?1:0)+'&level='+this.identityInfo.level
			})
		},
		findRecord(){
			uni.navigateTo({
				url: '/pages/group/search-msg?id='+this.exampleInfo.id
			})
		},
		messageFree(e){
			let flag = e.detail.value?2:1
			this.api.post('chatGroupManage/disturb', {
				chatGroupId: this.exampleInfo.id,
				flag: flag
			}).then(res=>{
				if(res.data.state != 'ok') return;
				// this.identityInfo.disturb  
				this.$set(this.identityInfo, 'disturb', flag)
			})
		},
		confirmDelete(){
			let that = this
			getApp().globalData.mysql.deleteData('togroupmsg', 'groupId', this.exampleInfo.id, function(res1){
				getApp().globalData.deleteHis = 1
				that.utils.showToast('删除成功');
			})
		},
		deleteHis(){
			this.utils.showModal('', '确定删除群的聊天记录吗？', this.confirmDelete)
		},
		addMembers(){
			uni.navigateTo({
				url: '/pages/addressBook/create-group?groupId='+this.exampleInfo.id
			})
		}
    }
}
</script>
<style lang="less">
	.group-set{
		padding: 32rpx;
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.uni-icons{
				margin-left: 8rpx;
			}
		}
		.all-student{
			
		}
		.students{
			
			overflow: hidden;
			margin-top: 32rpx;
			font-size: 0;
			.images{
				display: inline-block;
				text-align: center;
				width: 20%;
				// margin-right: 28rpx;
				margin-bottom: 24rpx;
				text{
					margin-top: 16rpx;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 24rpx;
				}
			}
			.img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				&:nth-child(6n){
					margin-right: 0;
				}
			}
			.addStu{
				display: inline-block;
				width: 20%;
				vertical-align: top;
				text-align: center;
				text{
					display: inline-block;
					
					width: 80rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 40rpx;
					font-size: 56rpx;
					color: #aaa;
					background: #f2f2f2;
					
				}
				
			}
		}
		.gs-item{
			height: 80rpx;
		}
		.notice-cont{
			font-size: 24rpx;
			color: #7F7F7F;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			white-space: pre-line;
		}
		.see-more{
			font-size: 24rpx;
			text-align: center;
			padding: 16rpx 0 24rpx;
			color: #7F7F7F;
		}
	}
	.delete-his{
		margin-top: 32rpx;
		color: #D9001B;
		font-size: 28rpx;
		text-align: center;
	}
</style>